<template>

  <n-tooltip trigger="hover">
    <template #trigger>
      <n-button @click="handleShow" text>
        <n-icon size="32">
          <icon icon="mdi:search"></icon>
        </n-icon>
      </n-button>
    </template>
    <span>搜索</span>
  </n-tooltip>

  <n-modal v-model:show="show"
           class="w-11/12 max-w-md "
           preset="card"
           :bordered="false">
    <SearchInput ref="searchInputRef" size="large"></SearchInput>
    <div class="flex">
      <div class="flex-1">
        <div v-for="(item,index) in searchKeyHistory"
             :key="index" class="float-left mx-3 my-1">
          <n-button @click="handleTagClick(item)" text>
            <n-tag checkable> {{ item }}</n-tag>
          </n-button>
        </div>
      </div>
      <div class="p-3 ">
        <n-button @click="handleClear" text>
          <TextIcon tip="清空" icon="maki:waste-basket"></TextIcon>
        </n-button>
      </div>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import {nextTick, ref} from "vue";
import {Icon} from "@iconify/vue";
import SearchInput from "@/components/pc/input/SearchInput.vue";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import router from "@/router";

const searchInputRef = ref()
const {searchKeyHistory} = storeToRefs(useAppStore())

const show = ref(false)

const handleShow = () => {
  show.value = true
  nextTick(() => {
    searchInputRef.value.doFocus()
  })
}
const handleClear = () => {
  searchKeyHistory.value = []
}
const handleTagClick = (item: string) => {
  router.push({
    path: `/pc/post/search`,
    query: {
      keyword: item
    }
  })
}


const doShow = () => {
  show.value = true
}
const doHide = () => {
  show.value = false
}
defineExpose({
  doShow,
  doHide
})

</script>

<style scoped>

</style>